<template>
  <div class="page">
    <div id="dau_charts" class="charts-item" :style="{ width: '100%', height: '340px' }"></div>
    <div id="wau_charts" class="charts-item" :style="{ width: '100%', height: '340px', 'margin-top': '50px' }"></div>
    <div class="table-box">
      <el-table :data="tableData" style="width: 100%" max-height="500">
        <el-table-column fixed prop="date" label="日期" width="120"/>
        <el-table-column prop="newUsers" label="新用户数"/>
        <el-table-column prop="pv" label="pv"/>
        <el-table-column prop="uv" label="uv"/>
        <el-table-column prop="dau" label="DAU"/>
        <el-table-column prop="wau" label="WAU"/>
        <el-table-column prop="mau" label="MAU"/>
        <el-table-column prop="payUsers" label="支付用户数"/>
        <el-table-column prop="payUserPercentage" label="支付用户占比"/>
        <el-table-column prop="orderCount" label="订单量"/>
        <el-table-column prop="totalAmount" label="总金额"/>
        <el-table-column prop="averageAmountPerUser" label="客单金额"/>
        <el-table-column prop="averageAmountPerOrder" label="比单金额"/>
        <el-table-column prop="averageDurationPerUser" label="人均使用时长(分钟)"/>
        <el-table-column prop="averageUsagePerUser" label="人均使用次数"/>
        <el-table-column prop="members" label="会员数"/>
        <el-table-column prop="memberPercentage" label="会员占比"/>
        <el-table-column prop="plusMembers" label="plus会员数"/>
        <el-table-column prop="proMembers" label="pro会员数"/>
        <el-table-column prop="channelOrdrAmt" label="渠道金额"/>
        <el-table-column prop="channelPercent" label="渠道金额占比"/>
      </el-table>
    </div>
  </div>
</template>

<script setup>
import {onMounted, onBeforeUnmount, ref} from "vue";
import api from '../../api/index.js'
import * as echarts from "echarts";

const tableData = ref([])
const chartsObj = {}
const initLineCharts = (id, title, xData, seriesData) => {
  if (!chartsObj[id]) {
    chartsObj[id] = echarts.init(document.getElementById(id));
  }
  chartsObj[id].setOption({
    title: {
      text: title,
      left: '20%',
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: seriesData.map((item) => item.name)
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: xData,
      axisLabel : { // 坐标轴刻度标签的相关设置。
        interval: 0,
        rotate: '45'
      },
    },
    yAxis: {
      type: 'value'
    },
    series: seriesData,
  });
}
onMounted(() => {
  window.onresize = function () {
    Object.keys(chartsObj).forEach((k) => {
      chartsObj[k] && chartsObj[k].resize();
    })
  }
})
onBeforeUnmount(() => {
  Object.keys(chartsObj).forEach((k) => {
    chartsObj[k] && chartsObj[k].dispose();
  })
})
const getChartsData = async () => {
  try {
    const res = await api.getCoreChartsData()
    if (res.data && res.data.length) {
      const xData = []
      const seriesData1 = [
        {
          name: 'DAU',
          type: 'line',
          color: '#0674f5',
          data: []
        },{
          name: '新用户',
          type: 'line',
          color: '#ee9236',
          data: []
        },{
          name: 'UV',
          type: 'line',
          color: '#30ae07',
          data: []
        },
      ]
      const seriesData2 = [
        {
          name: 'WAU',
          type: 'line',
          color: '#0674f5',
          data: []
        },{
          name: 'MAU',
          type: 'line',
          color: '#ee9236',
          data: []
        },
      ]
      res.data.forEach((data) => {
        xData.push(data.date)
        seriesData1[0].data.push(data.dau)
        seriesData1[1].data.push(data.newUsers)
        seriesData1[2].data.push(data.uv)
        seriesData2[0].data.push(data.wau)
        seriesData2[1].data.push(data.mau)
      })
      initLineCharts('dau_charts', 'DAU', xData, seriesData1)
      initLineCharts('wau_charts', '用户规模', xData, seriesData2)
    }
  } catch(e){}
}
const getData = async () => {
  try {
    const res = await api.getCoreData()
    if (res.data && res.data.length) {
      tableData.value = res.data
    }
  } catch(e){}
}
getChartsData()
getData()
</script>

<style scoped lang="scss">
.page{
  position: relative;
  height: 100%;
}
.table-box{
  position: relative;
  padding-bottom: 20px;
}
</style>
